<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '管家巡检',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<template>
  <view class="inspec-list-wrap pb-safe">
    <view class="sticky top-[44px] left-0 w-screen bg-[#f2f2f2] z-99">
      <wd-tabs v-model="activeTab" auto-line-width @click="getInspectList">
        <block v-for="(item, i) in patrolStatusMap" :key="i">
          <wd-tab :title="getTitle(item, i)">
            <wd-search
              v-if="activeTab === 0"
              v-model="roadMapName"
              placeholder="请输入巡检路线名称"
              placeholder-left
              cancel-txt="搜索"
              @cancel="getInspectList"
              @clear="getInspectList"
            />
          </wd-tab>
        </block>
      </wd-tabs>
    </view>

    <view v-if="activeTab === 2">
      <view class="flex justify-between p-4">
        <view class="center w-[31%] h-[70px] bg-blue flex-col text-white rounded-2">
          <view class="text-sm">总点位数</view>
          <view class="">
            <text class="text-xl">{{ processCountVal.totalCount }}</text>
            个
          </view>
        </view>
        <view class="center w-[31%] h-[70px] bg-emerald flex-col text-white rounded-2">
          <view class="text-sm">已打卡</view>
          <view class="">
            <text class="text-xl">{{ processCountVal.uncheckedCount }}</text>
            个
          </view>
        </view>
        <view class="center w-[31%] h-[70px] bg-amber flex-col text-white rounded-2">
          <view class="text-sm">未打点</view>
          <view class="">
            <text class="text-xl">{{ processCountVal.checkedCount }}</text>
            个
          </view>
        </view>
      </view>

      <wd-radio-group v-model="valueRadio" inline shape="dot" class="px-4">
        <wd-radio :value="1">全部</wd-radio>
        <wd-radio :value="2">一小时内</wd-radio>
        <wd-radio :value="3">半小时内</wd-radio>
        <wd-radio :value="4">已转单未确认</wd-radio>
      </wd-radio-group>
    </view>

    <view class="pb-[70px]">
      <view class="px-3 my-3" v-for="it in dataList" :key="it.id" @click="handleDetail(it.id)">
        <view class="p-3 bg-white rounded-4 overflow-hidden">
          <view class="text-sm">
            <view class="flex justify-between mt-1">
              <view class="flex">
                <view class="w-20 text-[#6e6e6e]">巡检类别：</view>
                {{ patrolTypeMap[it.patrolType] }}
              </view>
              <view>
                <wd-tag type="warning" mark>智能路线</wd-tag>
              </view>
            </view>
            <view class="flex mt-1">
              <view class="w-20 text-[#6e6e6e]">项目名称：</view>
              {{ it.projectName }}
            </view>
            <view class="flex mt-1">
              <view class="w-20 text-[#6e6e6e]">线路名称：</view>
              {{ it.roadMapName }}
            </view>
            <view class="flex mt-1">
              <view class="w-20 text-[#6e6e6e]">起止日期：</view>
              {{ it.startTime }} - {{ it.endTime }}
            </view>
            <view class="flex mt-1">
              <view class="w-20 text-[#6e6e6e]">总点位数：</view>
              {{ it.points }}
            </view>
          </view>
          <view
            class="border-t-[#f2f2f2] border-t border-t-solid flex justify-end mt-3"
            v-if="activeTab !== 3"
          >
            <view class="pt-3">
              <wd-button size="small" plain hairline>派单</wd-button>
              <text class="ml-2" v-if="activeTab === 0">
                <wd-button size="small" @click.stop="handleAcceptTask(it.id)">接单</wd-button>
              </text>
            </view>
          </view>
        </view>
      </view>

      <wd-status-tip
        v-if="loading === 'finished' && dataList.length === 0"
        image="content"
        tip=""
      />

      <wd-loadmore :state="loading" />
    </view>

    <view class="fixed bottom-0 left-0 w-screen px-4 pb-safe bg-white">
      <view class="py-3">
        <wd-button :round="false" icon="scan" class="w-full" @click="handleScan">
          扫码巡检
        </wd-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { inspectList, IInspectCreate, taskCount, processCount, acceptTask } from './api'
import { patrolStatusMap, patrolTypeMap } from './dict'
import { useMessage } from 'wot-design-uni'

const message = useMessage()

const activeTab = ref(0)

const valueRadio = ref(1)
const roadMapName = ref('')
const loading = ref('loading')

const dataList = ref<IInspectCreate[]>([])
async function getInspectList() {
  dataList.value = []
  loading.value = 'loading'
  const params = {
    patrolStatus: activeTab.value + 1,
    roadMapName: roadMapName.value,
    pageSize: 50,
    pageNum: 1,
  }
  const { rows } = await inspectList(params)
  dataList.value = rows
  loading.value = 'finished'
}
getInspectList()

function handleScan() {
  uni.navigateTo({
    url: '/pages-sub/inspection/processing',
  })
}

const taskCountVal = ref()
async function getTaskCount() {
  try {
    const { data } = await taskCount()
    taskCountVal.value = data
  } catch (error) {}
}
getTaskCount()

const processCountVal = ref()
async function getProcessCount() {
  try {
    const { data } = await processCount()
    processCountVal.value = data
  } catch (error) {}
}

function getTitle(item, i) {
  const obj = {
    1: 'pendingCount',
    2: 'notStartCount',
    3: 'progressingCount',
    4: 'completeCount',
  }
  if (taskCountVal.value[obj[i]]) {
    return `${item} (${taskCountVal.value[obj[i]]})`
  } else {
    return `${item}（0）`
  }
}

function handleDetail(id) {
  uni.navigateTo({
    url: `/pages-sub/inspection/detail?id=${id}`,
  })
}

function handleAcceptTask(id) {
  message
    .confirm({
      title: '确认接单吗?',
    })
    .then(async () => {
      try {
        const { data } = await acceptTask(id)

        uni.navigateTo({
          url: `/pages-sub/inspection/detail?id=${id}`,
        })
      } catch (error) {}
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
}
</script>

<style lang="scss" scoped>
.inspec-list-wrap {
  ::v-deep .wd-radio-group {
    background-color: transparent;
  }
}
</style>
